<template>
    <div id="SphHome">
        <TypeNav></TypeNav>
        <ListContainer></ListContainer>
        <TodayRecommend></TodayRecommend>
        <Rank></Rank>
        <Like></Like>
        <Floor v-for="(floorItem) in floorsList" :key="floorItem.id" :floorItem="floorItem"></Floor>
        <Brand></Brand>
    </div>
</template>
<script>
import Brand from './Brand'
import Floor from './Floor'
import Like from './Like'
import ListContainer from './ListContainer'
import Rank from './Rank'
import TodayRecommend from './TodayRecommend'
import { mapState } from 'vuex'
export default {
  name: 'SphHome',
  components: {
    Brand,
    Floor,
    Like,
    ListContainer,
    Rank,
    TodayRecommend
  },
  data () {
    return {
      msg: 'Welcome to Home'
    }
  },
  mounted() {
    this.$store.dispatch('getBannerList');
    this.$store.dispatch('getFloorsList');
  },
  computed: {
    ...mapState({
      floorsList: state => state.Home.floorsList
    })
  }
}
</script>